5장 문서 객체 모델

  • DOM(document Object Model) 스크립팅이야말로 개발자가 사용자 경험을 질적으로 향상시킬 수 있게 한 가장 중요한 기법 중 하나이다.

5.1 문서 객체 모델에 대한 소개

  • DOM은 W3C에서 제정한 XML문서를 표현하기 위한 표준이다.
  • DOM은 Java, Perl, PHP, Ruby, Python, JavaScript등 대부분의 웹 개발 프로그램 언어에 구현되어 있다.
  • DOM은 개발자들이 직관적으로 XML 계층 구조를 탐색할 수 있는 방법을 제공하기 위해 만들어졌다.

5.2 DOM 탐색하기

  • DOM에서는 XML 구조를 탐색 가능한 트리의 형태로 표현한다.
  • DOM 트리의 모든 객체들은 '노드(node)'다
  • 각 노드는 엘리먼트, 텍스트, 문서등의 타입을 가진다.
  • 모든 DOM 노드마다 친척들을 참조할 수 있는 포인터들이 있다.
  • page 91 그림 5-1, 5-2 참고

5-1 간단한 HTML 웹 페이지(간단한 XML 문서이기도 함)

  

<html>
<head>
  <title>Introduction to the DOM</title>
</head>
<body>
  <h1>Introduction to the DOM</h1>
  <p class="test">There are number of reasons why the
  DOM is awesome, here are some:</p>
  <ul>
    <li id="everywhere">It can be found everywhere.</li>
    <li class="test">It's easy to use.</li>
    <li class="test">It can help you to find what you want, really quickly.</li>
  </ul>
</body>
</html>

  • 루트 엘리먼트는 <html> 엘리먼트다
    • 루트 엘리먼트(<html>)에 접근하는 방법 : document.documentElement
  • <h1> 탐색방법 : document.documentElement.firstChild.nextSibling.firstChild
    • <html>과 <head> 사이에 줄바꿈이 있으며, 이는 공백으로 취급이 된다.
    • 이는 곧 <head>엘리먼트가 아닌 텍스트노드가 먼저 취급되기 때문에 오류가 발생한다.

DOM 에서 공백 다루기

  • 코드 5-2에서 공백 버그를 피할 수 있는 기법을 볼 수 있다.

5-2 XML 문서의 공백 버그를 피해가는 방법

   

function cleanWhitespace(element) {
 
  //엘리먼트가 제공되지 않았다면 HTML 문서 전체에 함수를 적용한다. 
  element = element || document;
  
  //첫째 자식을 시작점으로 삼는다. 
  var cur = element.firstChild;

  //자식노드가 없을때까지 계속한다. 
  while (cur != null) {
  
    //텍스트 노드이면서 공백밖에 없을 경우
    if (cur.nodeType == 3 && ! /\S/.test(cur.nodeValue)) {
      element.removeChild(cur);
      
    //엘리먼트 일 경우
    } else if (cur.nodeType == 1) {
      cleanWhitespace(cur);
    }

    //다음 자식 노드로 이동
    cur = cur.nextSibling;
  }
}

  • 장점
    • DOM문서 탐색시 정신을 온전히 유지할 수 있다.
  • 단점
    • 속도가 느리다
    • 공백밖에 없는 텍스트 노드를 찾기 위해 모든 DOM엘리먼트와 텍스트노드를 탐색한다.
  • 이 함수는 노드타입을 사용한다.
    • Element(nodeType = 1) : XML 엘리먼트 대부분이 이 타입이다.
    • Text(nodeType = 3) : 문서안에 있는 모든 텍스트가 이 타입이다.
    • Document(noteType = 9) : 루트 엘리먼트

간단한 DOM 탐색